import React, { useEffect, useState } from "react";
import { Card, Form, Button, Input, Select, Table, Row, Col } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import {getHospitalListRequest} from '@api/hospital/hospitalList'
import type {getHosListSearchParamsType,hospitalListContentType,hospitalListItemsType } from '@api/hospital/model/hospitalListTypes'
export default function HospitalList() {
  //控制表格的是否加载中的状态
  const [isLoading, setIsLoading] = useState(false);
  //控制当前页码的状态
  const [page,setPage]=useState(1)
   //控制每页显示的条数
   const [limit,setLimit]=useState(3)
   //控制医院总数量
   const [total,setTotal]=useState(0)
    //控制查询时用户输入的表单参数
    const [searchParams,setSearchParams]=useState<getHosListSearchParamsType>({})
   //控制表格的数据
   const [hospitalList,setHospitalList]=useState<hospitalListContentType>([])
     //刚加载组件的时候,发送医院列表的请求
     useEffect(()=>{
      setIsLoading(true)
      const getHospitalList =async()=>{
      const result=await getHospitalListRequest(page,limit,searchParams)
       //把结果中的医院列表的数组设置给状态state
       setHospitalList(result.content)
       //把结果中的医院总数设置给状态state
       setTotal(result.totalElements)
       setIsLoading(false)
      }
      getHospitalList()
     },[])
  
  const columns = [
    {
      title: "序号",
      width: 60,
      dataIndex: "index",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院logo",
         //如果设置了dataIndex,则render拿到的dataIndex对应的数据
      dataIndex: "logoData",
      render(logoData:string){
        return (
          <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
        )
      }
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "等级",
      render(_: any, data: hospitalListItemsType) {
        return data.param.hostypeString
      }
    },
    {
      title: "详细地址",
      render(_: any, data: hospitalListItemsType) {
        return data.param.fullAddress
      }
    },
    {
      title: "状态",
      render(_: any, data: hospitalListItemsType) {
        return data.status === 0 ? "下线" : "上线"
      }
    },
    {
      title: "创建时间",
      dataIndex: 'createTime',
    },
    {
      title: "操作",
      width: 120,
      dataIndex: "do",
      fixed: "right" as "right",
      render(_: any) {
        return (
          <div>
            <Button type="primary">查看</Button>
            <Button type="primary">排班</Button>
            <Button type="primary">上线</Button>
          </div>
        );
      },
    },
  ];
  return (
    <div>
      <Card>
        <Form name="basic">
          <Row gutter={10}>
            <Col span={4}>
              <Form.Item name="hosname">
                <Select placeholder="请输入省份" allowClear>
                  <Select.Option value="male">河南</Select.Option>
                  <Select.Option value="female">湖北</Select.Option>
                  <Select.Option value="other">广东</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="hosname">
                <Select placeholder="请输入市" allowClear>
                  <Select.Option value="male">郑州</Select.Option>
                  <Select.Option value="female">武汉</Select.Option>
                  <Select.Option value="other">深圳</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="hoscode">
                <Select placeholder="请输入县/区" allowClear>
                  <Select.Option value="male">高新区</Select.Option>
                  <Select.Option value="female">洪山区</Select.Option>
                  <Select.Option value="other">宝安区</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="hosname">
                <Input placeholder="医院名称" />
              </Form.Item>
            </Col>

            <Col span={4}>
              <Form.Item name="hoscode">
                <Input placeholder="医院编号" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="hoscode">
                <Select placeholder="医院类型" allowClear>
                  <Select.Option value="male">三级甲等</Select.Option>
                  <Select.Option value="female">三级乙等</Select.Option>
                  <Select.Option value="other">二级甲等</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={10}>
            <Col span={4}>
              <Form.Item name="hoscode">
                <Select placeholder="医院状态" allowClear>
                  <Select.Option value="male">上线</Select.Option>
                  <Select.Option value="female">下线</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={2}>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                 
                  icon={<SearchOutlined />}
                >
                  查询
                </Button>
              </Form.Item>
            </Col>

            <Col span={2}>
              <Form.Item>
                <Button type="default" htmlType="reset">
                  清空
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Table
          style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1100 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          loading={isLoading}
          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total: total,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8,15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            showTotal(total) {
              return `总共有${total}条数据`;
            },
          }}
        />
        ;
      </Card>
    </div>
  );
}
